<template>
  <div id="chartLine" class="line-wrap"></div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import * as echarts from 'echarts'
// require('echarts/theme/shine') // 引入主题
// export default {
//   name: 'Home',
//   data () {
//     return {
//       chartLine: null
//     }
//   },
//   mounted: function () {
//     // fetch('http://8.129.16.193:8089/ip', {
//     //   method: 'GET'
//     // })
//     //   .then((res) => {
//     //     return res.text()
//     //   })
//     //   .then((res) => {
//     //     const diqu = res
//     //     const sheng = diqu.split('省')[0]
//     //     const shi = diqu.split('省')[1].split('市')[0]
//     //     fetch(
//     //       `https://geoapi.heweather.net/v2/city/lookup?key=9d80e02586174f0e9385b04644afc8ed&location=${shi}&adm=${sheng}`,
//     //       {
//     //         method: 'GET'
//     //       }
//     //     )
//     //       .then((res) => {
//     //         return res.json()
//     //       })
//     //       .then((res) => {
//     //         console.log(res)
//     //       })
//     //   })
//     this.$nextTick(() => {
//       this.drawLineChart()
//     })
//   },
//   methods: {
//     drawLineChart () {
//       this.chartLine = echarts.init(this.$el, 'shine') // 基于准备好的dom，初始化echarts实例
//       const option = {
//         tooltip: {
//           trigger: 'axis'
//         },
//         legend: {
//           data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         calculable: true,
//         xAxis: [
//           {
//             type: 'category',
//             boundaryGap: false,
//             axisTick: {
//               show: false
//             },
//             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//           }
//         ],
//         yAxis: [
//           {
//             type: 'value',
//             axisTick: {
//               show: false
//             },
//             name: '（人）'
//           }
//         ],
//         series: [
//           {
//             name: '邮件营销',
//             type: 'line',
//             stack: '总量',
//             data: [120, 132, 101, 134, 90, 230, 210]
//           },
//           {
//             name: '联盟广告',
//             type: 'line',
//             stack: '总量',
//             data: [220, 182, 191, 234, 290, 330, 310]
//           },
//           {
//             name: '视频广告',
//             type: 'line',
//             stack: '总量',
//             data: [150, 232, 201, 154, 190, 330, 410]
//           },
//           {
//             name: '直接访问',
//             type: 'line',
//             stack: '总量',
//             data: [320, 332, 301, 334, 390, 330, 320]
//           },
//           {
//             name: '搜索引擎',
//             type: 'line',
//             stack: '总量',
//             data: [820, 932, 901, 934, 1290, 1330, 1320]
//           }
//         ]
//       }
//       // 使用刚指定的配置项和数据显示图表
//       this.chartLine.setOption(option)
//     }
//   }
// }
</script>
<style scope>
.line-wrap {
  width: 50%;
  height: 400px;
}
</style>
